import React, { useState, useRef } from 'react';
import {
  Card,
  Table,
  Input,
  Button,
  DatePicker,
  Tabs,
  Space,
  Tag,
  Pagination,
  Select,
  Dialog,
  Textarea,
  MessagePlugin,
} from 'tdesign-react';
import { SearchIcon } from 'tdesign-icons-react';
import { uploadDriverImage, type DriverImageType } from 'services/upload';
import { getPendingDrivers, reviewDriver, createDriver } from 'services/driver';

// 司机审核数据类型
interface DriverAudit {
  id: number;
  backendId: string; // 后端 driver_id，用于审核操作
  driverName: string;
  phone: string;
  auditStatus: 'pending' | 'approved' | 'rejected';
  idNumber: string;
  idCardFront: string;
  idCardBack: string;
  licenseNumber: string;
  licenseFront: string;
  licenseBack: string;
  vehicleLicenseFront: string;
  vehicleLicenseBack: string;
  vehicleType: string;
  vehicleLength: number;
  vehicleWidth: number;
  vehicleHeight: number;
  vehicleWeight: number;
  maxWeight: number;
  maxHeight: number;
  vehicleNumber: string;
  location: string;
  loadingMethod: string;
  vehicleRequirement: string;
  vehiclePhoto: string;
  plateNumber: string;
  registerDate: string;
}

const DriverAuditPage: React.FC = () => {
  // 状态管理
  const [activeTab, setActiveTab] = useState('all');
  const [searchValue, setSearchValue] = useState('');
  const [searchDebounced, setSearchDebounced] = useState('');
  const getCurrentMonthRange = () => {
    const now = new Date();
    const start = new Date(now.getFullYear(), now.getMonth(), 1);
    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    const fmt = (d: Date) => d.toISOString().split('T')[0].replace(/-/g, '/');
    return [fmt(start), fmt(end)] as [string, string];
  };

  const [dateRange, setDateRange] = useState<[string, string]>(getCurrentMonthRange());
  const [dateRangeDebounced, setDateRangeDebounced] = useState<[string, string]>(getCurrentMonthRange());
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [timeRangeType, setTimeRangeType] = useState('month'); // 'week' | 'month'
  const [loadingTable, setLoadingTable] = useState(false);
  const abortRef = useRef<AbortController | null>(null);
  const [total, setTotal] = useState(0);
  const [tableData, setTableData] = useState<DriverAudit[]>([]);
  
  // 图片查看弹窗状态
  const [imageDialogVisible, setImageDialogVisible] = useState(false);
  const [currentImage, setCurrentImage] = useState({ src: '', title: '' });
  const [imageGroup, setImageGroup] = useState<{ front: string; back: string; title: string } | null>(null);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  
  // 驳回弹窗状态
  const [rejectDialogVisible, setRejectDialogVisible] = useState(false);
  const [rejectReason, setRejectReason] = useState('');
  const [currentRejectRow, setCurrentRejectRow] = useState<DriverAudit | null>(null);
  
  // 确认审核弹窗状态
  const [confirmDialogVisible, setConfirmDialogVisible] = useState(false);
  const [currentConfirmRow, setCurrentConfirmRow] = useState<DriverAudit | null>(null);
  
  // 司机详情弹窗状态
  const [detailDialogVisible, setDetailDialogVisible] = useState(false);
  const [currentDetailRow, setCurrentDetailRow] = useState<DriverAudit | null>(null);
  
  // 详情页图片查看弹窗状态
  const [detailImageDialogVisible, setDetailImageDialogVisible] = useState(false);
  const [currentDetailImage, setCurrentDetailImage] = useState({ src: '', title: '' });

  // 新增司机弹窗
  const [createDialogVisible, setCreateDialogVisible] = useState(false);
  const [creating, setCreating] = useState(false);
  const [form, setForm] = useState({
    driver_name: '',
    driver_phone: '',
    id_card_number: '',
    id_card_front_img: '',
    id_card_back_img: '',
    driver_license_number: '',
    driver_license_front_img: '',
    driver_license_back_img: '',
    driving_license_front_img: '',
    driving_license_back_img: '',
    driving_license_car_type: '',
    driving_license_car_length: undefined as unknown as number | undefined,
    driving_license_car_width: undefined as unknown as number | undefined,
    driving_license_car_height: undefined as unknown as number | undefined,
    driving_license_max_load: undefined as unknown as number | undefined,
    driving_license_max_volume: undefined as unknown as number | undefined,
    driving_license_max_height: undefined as unknown as number | undefined,
    driving_license_vehicle_axles: '',
    driving_license_forbidden_area: '',
    driving_license_loading_method: '',
    driving_license_vehicle_requirements: '',
    car_images: '',
    car_plate: '',
    driving_license_register_date: ''
  });

  // （使用 TDesign Dialog 的 preventScrollThrough 处理背景滚动）

  // 文件选择器 refs：按字段存储，供自定义按钮触发点击
  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});

  const handleUploadToField = async (file: File, field: keyof typeof form, type: DriverImageType) => {
    try {
      const resp = await uploadDriverImage(file, type);
      const filePath = (resp as any)?.data?.file_path ?? (resp as any)?.file_path;
      const path = typeof filePath === 'string' ? filePath : '';
      setForm((prev) => ({ ...prev, [field]: path }));
      MessagePlugin.success('图片已上传');
    } catch (err: any) {
      MessagePlugin.error(err?.message || '上传失败');
    }
  };

  // 默认图片路径
  const defaultPhotoUrl = '/images/default-photo.jpg';

  // 缩略图组件（与列表页一致的风格）
  const PhotoThumbnail: React.FC<{ src?: string; alt: string }> = ({ src, alt }) => (
    <img
      src={src || defaultPhotoUrl}
      alt={alt}
      style={{
        width: '40px',
        height: '24px',
        borderRadius: '4px',
        border: '1px solid #e7e7e7',
        objectFit: 'cover'
      }}
      onError={(e) => {
        const target = e.target as HTMLImageElement;
        target.src = defaultPhotoUrl;
      }}
    />
  );

  // 图片组件，处理默认图片
  const ImageCell = ({ src, alt, style }: { src?: string; alt: string; style?: React.CSSProperties }) => (
    <img
      /* 使用同源路径，避免直连后端端口。/static 已在开发(vite)与生产(nginx)做了代理 */
      src={src && typeof src === 'string' && src.startsWith('/static') ? src : (src || defaultPhotoUrl)}
      alt={alt}
      style={{
        width: 96,
        height: 64,
        borderRadius: 6,
        border: '1px solid #e7e7e7',
        objectFit: 'cover',
        ...(style || {})
      }}
      loading="lazy"
      decoding="async"
      onError={(e) => {
        const target = e.target as HTMLImageElement;
        target.src = defaultPhotoUrl;
      }}
    />
  );

  // （已清理）

  // 处理标签页切换（恢复为常规请求，不做即时渲染）
  const handleTabChange = (value: any) => {
    const tab = String(value);
    setActiveTab(tab);
    setCurrentPage(1);
  };

  // 处理日期范围变化
  const handleDateRangeChange = (value: any) => {
    setDateRange(value);
  };

  // 处理时间范围类型切换
  const handleTimeRangeTypeChange = (type: 'week' | 'month') => {
    setTimeRangeType(type);
    const now = new Date();

    if (type === 'week') {
      // 本周：从周一到周日
      const startOfWeek = new Date(now);
      const day = startOfWeek.getDay();
      const diff = startOfWeek.getDate() - day + (day === 0 ? -6 : 1); // 调整到周一
      startOfWeek.setDate(diff);

      const endOfWeek = new Date(startOfWeek);
      endOfWeek.setDate(startOfWeek.getDate() + 6);

      setDateRange([
        startOfWeek.toISOString().split('T')[0].replace(/-/g, '/'),
        endOfWeek.toISOString().split('T')[0].replace(/-/g, '/')
      ]);
    } else {
      // 本月：从月初到月末
      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);

      setDateRange([
        startOfMonth.toISOString().split('T')[0].replace(/-/g, '/'),
        endOfMonth.toISOString().split('T')[0].replace(/-/g, '/')
      ]);
    }
  };

  // 处理单张图片查看
  const handleImageView = (src: string, title: string) => {
    setCurrentImage({ src: src || defaultPhotoUrl, title });
    setImageGroup(null);
    setImageDialogVisible(true);
  };

  // 处理正反面图片查看
  const handleImageGroupView = (front: string, back: string, title: string) => {
    setImageGroup({ front: front || defaultPhotoUrl, back: back || defaultPhotoUrl, title });
    setCurrentImageIndex(0); // 默认显示正面
    setCurrentImage({ src: '', title: '' });
    setImageDialogVisible(true);
  };

  // 切换到上一张图片
  const handlePrevImage = () => {
    if (imageGroup) {
      setCurrentImageIndex(currentImageIndex === 0 ? 1 : 0);
    }
  };

  // 切换到下一张图片
  const handleNextImage = () => {
    if (imageGroup) {
      setCurrentImageIndex(currentImageIndex === 0 ? 1 : 0);
    }
  };

  // 关闭图片查看弹窗
  const handleImageDialogClose = () => {
    setImageDialogVisible(false);
    setCurrentImage({ src: '', title: '' });
    setImageGroup(null);
    setCurrentImageIndex(0);
  };

  // 获取当前显示的图片信息
  const getCurrentDisplayImage = () => {
    if (imageGroup) {
      const images = [imageGroup.front, imageGroup.back];
      const titles = ['正面照片', '反面照片'];
      return {
        src: images[currentImageIndex],
        title: `${imageGroup.title} - ${titles[currentImageIndex]}`
      };
    }
    return currentImage;
  };

  // 处理驳回操作
  const handleReject = (row: DriverAudit) => {
    setCurrentRejectRow(row);
    setRejectReason('');
    setRejectDialogVisible(true);
  };

  // 确认驳回
  const handleRejectConfirm = () => {
    if (!rejectReason.trim()) {
      return;
    }
    if (!currentRejectRow?.backendId) return;
    reviewDriver(currentRejectRow.backendId, { action: 'reject', reject_reason: rejectReason })
      .then(() => {
        MessagePlugin.success('已驳回');
        setRejectDialogVisible(false);
        setRejectReason('');
        setCurrentRejectRow(null);
        fetchData();
      })
      .catch((err: any) => {
        MessagePlugin.error(err?.message || '驳回失败');
      });
  };

  // 取消驳回
  const handleRejectCancel = () => {
    setRejectDialogVisible(false);
    setRejectReason('');
    setCurrentRejectRow(null);
  };

  // 处理确认审核操作（仅待审核时允许）
  const handleConfirm = (row: DriverAudit) => {
    if (row.auditStatus !== 'pending') return;
    setCurrentConfirmRow(row);
    setConfirmDialogVisible(true);
  };

  // 处理确认审核取消
  const handleConfirmCancel = () => {
    setConfirmDialogVisible(false);
    setCurrentConfirmRow(null);
  };

  // 处理确认审核通过
  const handleConfirmApprove = () => {
    if (!currentConfirmRow?.backendId) {
      setConfirmDialogVisible(false);
      setCurrentConfirmRow(null);
      return;
    }
    reviewDriver(currentConfirmRow.backendId, { action: 'approve' })
      .then(() => {
        MessagePlugin.success('已通过审核');
        setConfirmDialogVisible(false);
        setCurrentConfirmRow(null);
        fetchData();
      })
      .catch((err: any) => {
        MessagePlugin.error(err?.message || '操作失败');
      });
  };

  // 处理司机详情查看：直接使用表格中的数据，不再请求接口
  const handleViewDetail = (row: DriverAudit) => {
    setCurrentDetailRow(row);
    setDetailDialogVisible(true);
  };

  // 处理司机详情弹窗关闭
  const handleDetailClose = () => {
    setDetailDialogVisible(false);
    setCurrentDetailRow(null);
  };

  // 处理详情页图片查看
  const handleDetailImageView = (src: string, title: string) => {
    setCurrentDetailImage({ src: src || defaultPhotoUrl, title });
    setDetailImageDialogVisible(true);
  };

  // 处理详情页图片查看弹窗关闭
  const handleDetailImageDialogClose = () => {
    setDetailImageDialogVisible(false);
    setCurrentDetailImage({ src: '', title: '' });
  };

  // （删除模拟数据与本地过滤，统一以后端返回为准）

  // 将后端字段映射为前端 DriverAudit
  const toDriverAudit = (item: any): DriverAudit => {
    // 本地开发优先走 Vite 代理：/static/... 直接使用相对路径，避免直连后端导致 502
    const prefix = (p?: string) => (p && typeof p === 'string' && p.startsWith('/static') ? p : p || '');
    return {
      id: 0, // 序号由表格渲染时计算
      backendId: item.id || '',
      driverName: item.driver_name || '',
      phone: item.driver_phone || '',
      auditStatus: (item.check_status === '1' ? 'pending' : item.check_status === '3' ? 'approved' : 'rejected') as any,
      idNumber: item.id_card_number || '',
      idCardFront: prefix(item.id_card_front_img),
      idCardBack: prefix(item.id_card_back_img),
      licenseNumber: item.driver_license_number || '',
      licenseFront: prefix(item.driver_license_front_img),
      licenseBack: prefix(item.driver_license_back_img),
      vehicleLicenseFront: prefix(item.driving_license_front_img),
      vehicleLicenseBack: prefix(item.driving_license_back_img),
      vehicleType: item.driving_license_car_type || '',
      vehicleLength: item.driving_license_car_length ?? 0,
      vehicleWidth: item.driving_license_car_width ?? 0,
      vehicleHeight: item.driving_license_car_height ?? 0,
      vehicleWeight: item.driving_license_max_load ?? 0,
      maxWeight: item.driving_license_max_volume ?? 0,
      maxHeight: item.driving_license_max_height ?? 0,
      vehicleNumber: item.driving_license_vehicle_axles || '',
      location: item.driving_license_forbidden_area || '',
      loadingMethod: item.driving_license_loading_method || '',
      vehicleRequirement: item.driving_license_vehicle_requirements || '',
      vehiclePhoto: prefix(item.car_images),
      plateNumber: item.car_plate || '',
      registerDate: item.driving_license_register_date || '',
    } as DriverAudit;
  };

  // 构建查询参数
  const buildParams = () => {
    const statusMap: Record<string, 1 | 2 | 3 | undefined> = { pending: 1, rejected: 2, approved: 3 };
    const status = statusMap[activeTab];
    const [start, end] = dateRangeDebounced || [];
    const start_date = start ? String(start).replaceAll('/', '-') : undefined;
    const end_date = end ? String(end).replaceAll('/', '-') : undefined;
    return {
      page: currentPage,
      page_size: pageSize,
      search: searchDebounced || undefined,
      status,
      start_date,
      end_date,
      sort_by: 'created_at',
      sort_order: 'desc' as const,
    };
  };

  // 拉取数据
  const fetchData = async () => {
    const params = buildParams();

    // 取消上一请求
    if (abortRef.current) abortRef.current.abort();
    const controller = new AbortController();
    abortRef.current = controller;

    setLoadingTable(true);
    try {
      const res = await getPendingDrivers(params as any);
      const items = (res as any)?.data?.items ?? [];
      const totalVal = (res as any)?.data?.total ?? 0;
      const mapped = items.map(toDriverAudit);
      if (controller.signal.aborted) return;
      setTableData(mapped);
      setTotal(totalVal);
    } catch (err: any) {
      if (err?.name === 'CanceledError' || err?.message === 'canceled') return;
      MessagePlugin.error(err?.message || '获取列表失败');
      setTableData([]);
      setTotal(0);
    } finally {
      if (!controller.signal.aborted) setLoadingTable(false);
    }
  };

  // 搜索与日期范围防抖
  React.useEffect(() => {
    const t = setTimeout(() => setSearchDebounced(searchValue), 300);
    return () => clearTimeout(t);
  }, [searchValue]);

  React.useEffect(() => {
    const t = setTimeout(() => setDateRangeDebounced(dateRange), 300);
    return () => clearTimeout(t);
  }, [dateRange]);

  React.useEffect(() => {
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeTab, searchDebounced, dateRangeDebounced, currentPage, pageSize]);

  // ========= 提交前：表单校验与规范化 =========
  const isValidIdCard = (s: string) => /^\d{17}[\dXx]$/.test(s);
  const isValidMobile = (s: string) => /^1[3-9]\d{9}$/.test(s);
  const isValidPlate = (s: string) => /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-Z][A-Z0-9]{5}$/.test(s);

  const buildCreatePayload = () => {
    // 1) 基础必填校验
    if (!form.driver_name?.trim() || !form.driver_phone?.trim() || !form.id_card_number?.trim() || !form.driver_license_number?.trim()) {
      MessagePlugin.warning('请填写必填项：姓名、手机号、身份证号、驾驶证号');
      return { ok: false as const };
    }

    // 2) 关键字段格式校验
    if (!isValidIdCard(form.id_card_number)) {
      MessagePlugin.warning('身份证号需为18位，最后一位可为X');
      return { ok: false as const };
    }
    if (!isValidMobile(form.driver_phone)) {
      MessagePlugin.warning('请输入合法的中国大陆手机号');
      return { ok: false as const };
    }
    if (form.car_plate && !isValidPlate(form.car_plate)) {
      MessagePlugin.warning('车牌号格式不正确，例如：京A12345');
      return { ok: false as const };
    }

    // 3) 规范化：去空字符串、数值化
    const numericKeys: (keyof typeof form)[] = [
      'driving_license_car_length',
      'driving_license_car_width',
      'driving_license_car_height',
      'driving_license_max_load',
      'driving_license_max_volume',
      'driving_license_max_height',
    ];

    const payload: Record<string, any> = {};
    Object.entries(form).forEach(([k, v]) => {
      if (v === '' || v === undefined || v === null) return; // 删除空字符串字段，避免触发后端最小长度校验
      if ((numericKeys as string[]).includes(k)) {
        const n = Number(v);
        if (!Number.isNaN(n)) payload[k] = n; // 合法数字才传
        return;
      }
      // 车辆轴数：按接口定义保持为字符串，不做数值化
      if (k === 'driving_license_vehicle_axles') {
        payload[k] = String(v);
        return;
      }
      payload[k] = v;
    });

    // 4) 固定字段：审核状态为 '1'（待审核）与接口类型一致
    payload.check_status = '1';

    return { ok: true as const, payload };
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card style={{ overflow: 'visible' }}>
        {/* 标签页 */}
        <div className="yh-tabs-clean yh-tabs-clean--underline">
          <Tabs
            value={activeTab}
            onChange={handleTabChange}
            style={{ marginBottom: '24px' }}
          >
            <Tabs.TabPanel value="all" label="全部" />
            <Tabs.TabPanel value="pending" label="待审核" />
            <Tabs.TabPanel value="approved" label="已通过" />
            <Tabs.TabPanel value="rejected" label="已驳回" />
          </Tabs>
        </div>

        {/* 搜索和筛选区域 */}
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '24px',
          gap: '16px'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
            <span>搜索</span>
            <Input
              placeholder="请输入司机姓名/手机号"
              value={searchValue}
              onChange={setSearchValue}
              prefixIcon={<SearchIcon />}
              style={{ width: '300px' }}
            />
            <div style={{ display: 'flex' }}>
              <Button
                variant="outline"
                theme={timeRangeType === 'week' ? 'primary' : 'default'}
                onClick={() => handleTimeRangeTypeChange('week')}
                style={{
                  borderTopRightRadius: 0,
                  borderBottomRightRadius: 0,
                  borderRight: 'none'
                }}
              >
                本周
              </Button>
              <Button
                variant="outline"
                theme={timeRangeType === 'month' ? 'primary' : 'default'}
                onClick={() => handleTimeRangeTypeChange('month')}
                style={{
                  borderTopLeftRadius: 0,
                  borderBottomLeftRadius: 0
                }}
              >
                本月
              </Button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <DatePicker
                value={dateRange?.[0]}
                onChange={(v) => setDateRange([String(v || ''), dateRange?.[1]])}
                format="YYYY/MM/DD"
                size="medium"
                style={{ width: 140, fontSize: 14 }}
              />
              <span style={{ color: '#999' }}>-</span>
              <DatePicker
                value={dateRange?.[1]}
                onChange={(v) => setDateRange([dateRange?.[0], String(v || '')])}
                format="YYYY/MM/DD"
                size="medium"
                style={{ width: 140, fontSize: 14 }}
              />
            </div>
          </div>
          {/* 右侧：新增司机 */}
          <div>
            <Button theme="primary" onClick={() => setCreateDialogVisible(true)}>
              新增司机
            </Button>
          </div>
        </div>

        {/* 表格 */}
        <Table
          loading={loadingTable}
          data={tableData}
          columns={[
              {
                colKey: 'index',
                title: '序号',
                width: 80,
                cell: ({ rowIndex }) => (currentPage - 1) * pageSize + rowIndex + 1
              },
              {
                colKey: 'driverName',
                title: '司机姓名',
                width: 100,
                cell: ({ row }) => (
                  <span 
                    style={{ color: '#0052d9', cursor: 'pointer' }}
                    onClick={() => handleViewDetail(row)}
                  >
                    {row.driverName}
                  </span>
                )
              },
              {
                colKey: 'phone',
                title: '手机号',
                width: 120
              },
              {
                colKey: 'auditStatus',
                title: '审核状态',
                width: 100,
                cell: ({ row }) => {
                  const statusMap = {
                    pending: { text: '待审核', color: '#e37318' },
                    approved: { text: '已通过', color: '#0052d9' },
                    rejected: { text: '已驳回', color: '#d54941' }
                  };
                  const status = statusMap[row.auditStatus];
                  return (
                    <Tag theme="default" style={{ color: status.color, borderColor: status.color }}>
                      {status.text}
                    </Tag>
                  );
                }
              },
              {
                colKey: 'idNumber',
                title: '身份证号',
                width: 160
              },
              {
                colKey: 'idCardFront',
                title: '身份证正面照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.idCardFront} alt="身份证正面" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageGroupView(row.idCardFront, row.idCardBack, '身份证照片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'idCardBack',
                title: '身份证反面照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.idCardBack} alt="身份证反面" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageGroupView(row.idCardFront, row.idCardBack, '身份证照片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'licenseNumber',
                title: '驾驶证号',
                width: 140
              },
              {
                colKey: 'licenseFront',
                title: '驾驶证正面照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.licenseFront} alt="驾驶证正面" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageGroupView(row.licenseFront, row.licenseBack, '驾驶证照片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'licenseBack',
                title: '驾驶证反面照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.licenseBack} alt="驾驶证反面" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageGroupView(row.licenseFront, row.licenseBack, '驾驶证照片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'vehicleLicenseFront',
                title: '行驶证正面照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.vehicleLicenseFront} alt="行驶证正面" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageGroupView(row.vehicleLicenseFront, row.vehicleLicenseBack, '行驶证照片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'vehicleLicenseBack',
                title: '行驶证反面照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.vehicleLicenseBack} alt="行驶证反面" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageGroupView(row.vehicleLicenseFront, row.vehicleLicenseBack, '行驶证照片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'vehicleType',
                title: '车辆',
                width: 80
              },
              {
                colKey: 'vehicleSizeGroup',
                title: (
                  <div style={{ textAlign: 'center' }}>车辆尺寸(米)</div>
                ),
                children: [
                  {
                    colKey: 'vehicleLength',
                    title: '长度',
                    width: 80,
                    cell: ({ row }) => row.vehicleLength
                  },
                  {
                    colKey: 'vehicleWidth',
                    title: '宽度',
                    width: 80,
                    cell: ({ row }) => row.vehicleWidth
                  },
                  {
                    colKey: 'vehicleHeight',
                    title: '高度',
                    width: 80,
                    cell: ({ row }) => row.vehicleHeight
                  }
                ]
              },
              {
                colKey: 'vehicleWeight',
                title: '载重吨数(吨)',
                width: 120,
                cell: ({ row }) => `${row.vehicleWeight}吨`
              },
              {
                colKey: 'maxWeight',
                title: '载重体积(方数)',
                width: 120,
                cell: ({ row }) => `${row.maxWeight}万吨`
              },
              {
                colKey: 'maxHeight',
                title: '最大限高(米)',
                width: 120,
                cell: ({ row }) => `${row.maxHeight}米`
              },
              {
                colKey: 'vehicleNumber',
                title: '车辆轴数',
                width: 100
              },
              {
                colKey: 'vehicleDescGroup',
                title: (
                  <div style={{ textAlign: 'center' }}>车辆自述</div>
                ),
                children: [
                  {
                    colKey: 'location',
                    title: '禁区/国际',
                    width: 100
                  },
                  {
                    colKey: 'loadingMethod',
                    title: '装卸方式',
                    width: 100
                  },
                  {
                    colKey: 'vehicleRequirement',
                    title: '车型要求',
                    width: 100
                  }
                ]
              },
              {
                colKey: 'vehiclePhoto',
                title: '车辆照片',
                width: 140,
                cell: ({ row }) => (
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <PhotoThumbnail src={row.vehiclePhoto} alt="车辆照片" />
                    <Button 
                      variant="text" 
                      style={{ color: '#0052d9' }}
                      onClick={() => handleImageView(row.vehiclePhoto, '查看车辆图片')}
                    >
                      查看
                    </Button>
                  </div>
                )
              },
              {
                colKey: 'plateNumber',
                title: '车牌号',
                width: 100
              },
              {
                colKey: 'registerDate',
                title: '注册日期',
                width: 120
              },
              {
                colKey: 'operation',
                title: '操作',
                width: 120,
                fixed: 'right',
                cell: ({ row }) => (
                  <Space>
                    {row.auditStatus === 'pending' ? (
                      <>
                        <Button 
                          size="small" 
                          theme="primary"
                          onClick={() => handleConfirm(row)}
                        >
                          确认
                        </Button>
                        <Button 
                          size="small" 
                          variant="outline"
                          onClick={() => handleReject(row)}
                        >
                          驳回
                        </Button>
                      </>
                    ) : (
                      <>
                        <Button size="small" variant="text" style={{ color: '#0052d9' }} onClick={() => handleViewDetail(row)}>查看</Button>
                      </>
                    )}
                  </Space>
                )
              }
            ]}
            rowKey="backendId"
            bordered
            hover
            size="small"
          />

        {/* 分页 */}
        <div style={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          marginTop: '24px'
        }}>
          <Pagination
            current={currentPage}
            total={total}
            pageSize={pageSize}
            onChange={(pageInfo) => {
              setCurrentPage(pageInfo.current);
              if (pageInfo.pageSize) {
                setPageSize(pageInfo.pageSize);
              }
            }}
          />
        </div>

        {/* 图片查看弹窗 */}
        <Dialog
          visible={imageDialogVisible}
          header={getCurrentDisplayImage().title}
          width={700}
          onClose={handleImageDialogClose}
          footer={false}
          closeBtn={true}
        >
          <div style={{ 
            padding: '20px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#f5f5f5',
            borderRadius: '8px',
            position: 'relative'
          }}>
            {/* 左箭头 - 仅在有正反面图片组时显示 */}
            {imageGroup && (
              <button
                onClick={handlePrevImage}
                style={{
                  position: 'absolute',
                  left: '10px',
                  top: '50%',
                  transform: 'translateY(-50%)',
                  background: 'rgba(0, 0, 0, 0.5)',
                  color: 'white',
                  border: 'none',
                  borderRadius: '50%',
                  width: '40px',
                  height: '40px',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '18px',
                  zIndex: 10
                }}
              >
                ‹
              </button>
            )}
            
            <img
              src={getCurrentDisplayImage().src}
              alt={getCurrentDisplayImage().title}
              style={{
                maxWidth: '100%',
                maxHeight: '400px',
                borderRadius: '8px',
                objectFit: 'contain',
                backgroundColor: '#fff'
              }}
              onError={(e) => {
                const target = e.target as HTMLImageElement;
                target.src = defaultPhotoUrl;
              }}
            />

            {/* 右箭头 - 仅在有正反面图片组时显示 */}
            {imageGroup && (
              <button
                onClick={handleNextImage}
                style={{
                  position: 'absolute',
                  right: '10px',
                  top: '50%',
                  transform: 'translateY(-50%)',
                  background: 'rgba(0, 0, 0, 0.5)',
                  color: 'white',
                  border: 'none',
                  borderRadius: '50%',
                  width: '40px',
                  height: '40px',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '18px',
                  zIndex: 10
                }}
              >
                ›
              </button>
            )}

            {/* 指示器 - 显示当前是正面还是反面 */}
            {imageGroup && (
              <div style={{
                position: 'absolute',
                bottom: '10px',
                left: '50%',
                transform: 'translateX(-50%)',
                display: 'flex',
                gap: '8px'
              }}>
                <div style={{
                  width: '8px',
                  height: '8px',
                  borderRadius: '50%',
                  backgroundColor: currentImageIndex === 0 ? '#0052d9' : 'rgba(255, 255, 255, 0.5)'
                }} />
                <div style={{
                  width: '8px',
                  height: '8px',
                  borderRadius: '50%',
                  backgroundColor: currentImageIndex === 1 ? '#0052d9' : 'rgba(255, 255, 255, 0.5)'
                }} />
              </div>
            )}
          </div>
        </Dialog>

        {/* 新增司机弹窗（TDesign 原生 Dialog） */}
        <Dialog
          visible={createDialogVisible}
          header="新增司机"
          width={680}
          placement="center"
          preventScrollThrough
          closeBtn={false}
          className="yh-dialog--scroll"
          onClose={() => setCreateDialogVisible(false)}
          confirmBtn={
            <Button
              loading={creating}
              theme="primary"
              onClick={async () => {
                const res = buildCreatePayload();
                if (!res.ok) return;
                setCreating(true);
                try {
                  await createDriver(res.payload as any);
                  MessagePlugin.success('添加成功');
                  setCreateDialogVisible(false);
                  setForm({
                    driver_name: '', driver_phone: '', id_card_number: '', id_card_front_img: '', id_card_back_img: '',
                    driver_license_number: '', driver_license_front_img: '', driver_license_back_img: '',
                    driving_license_front_img: '', driving_license_back_img: '', driving_license_car_type: '',
                    driving_license_car_length: undefined as any, driving_license_car_width: undefined as any, driving_license_car_height: undefined as any,
                    driving_license_max_load: undefined as any, driving_license_max_volume: undefined as any, driving_license_max_height: undefined as any,
                    driving_license_vehicle_axles: '', driving_license_forbidden_area: '', driving_license_loading_method: '', driving_license_vehicle_requirements: '',
                    car_images: '', car_plate: '', driving_license_register_date: ''
                  });
                  // 刷新列表
                  setCurrentPage(1);
                  fetchData();
                } catch (err: any) {
                  MessagePlugin.error(err?.message || '添加失败');
                } finally {
                  setCreating(false);
                }
              }}
            >
              提交
            </Button>
          }
          cancelBtn="取消"
        >
          <div style={{ maxHeight: '72vh', overflow: 'auto', overflowX: 'hidden', paddingRight: 6 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 12px' }}>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>司机姓名*</div>
                    <Input size="small" value={form.driver_name} onChange={(v) => setForm({ ...form, driver_name: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>手机号*</div>
                    <Input size="small" value={form.driver_phone} onChange={(v) => setForm({ ...form, driver_phone: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>身份证号*</div>
                    <Input size="small" value={form.id_card_number} onChange={(v) => setForm({ ...form, id_card_number: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>驾驶证号*</div>
                    <Input size="small" value={form.driver_license_number} onChange={(v) => setForm({ ...form, driver_license_number: v })} />
                  </div>

                  {/* 图片字段与上传 */}
                  {[
                    ['id_card_front_img', '身份证正面', 'id_card_front'],
                    ['id_card_back_img', '身份证反面', 'id_card_back'],
                    ['driver_license_front_img', '驾驶证正面', 'driver_license_front'],
                    ['driver_license_back_img', '驾驶证反面', 'driver_license_back'],
                    ['driving_license_front_img', '行驶证正面', 'driving_license_front'],
                    ['driving_license_back_img', '行驶证反面', 'driving_license_back'],
                    ['car_images', '车辆照片', 'car_images']
                  ].map(([key, label, typeKey]) => (
                    <div key={key as string} style={{ display: 'flex', flexDirection: 'column' }}>
                      <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>{label}</div>
                      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                        <Input size="small" value={(form as any)[key]} onChange={(v) => setForm({ ...form, [key as any]: v })} placeholder="/static/..." />
                        {/* 隐藏原生 file input，防止显示“未选择文件”文案 */}
                        <input
                          ref={(el) => (fileInputRefs.current[key as string] = el)}
                          type="file"
                          accept="image/jpeg,image/jpg,image/png"
                          style={{ position: 'absolute', width: 1, height: 1, opacity: 0, pointerEvents: 'none' }}
                          onChange={(e) => {
                            const f = e.target.files?.[0];
                            if (f) handleUploadToField(f, key as any, typeKey as DriverImageType);
                            e.currentTarget.value = '';
                          }}
                        />
                        <Button size="small" variant="outline" onClick={() => fileInputRefs.current[key as string]?.click()}>
                          选择文件
                        </Button>
                      </div>
                    </div>
                  ))}

                  {/* 车辆/参数字段 */}
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车型</div>
                    <Input size="small" value={form.driving_license_car_type} onChange={(v) => setForm({ ...form, driving_license_car_type: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车牌号</div>
                    <Input size="small" value={form.car_plate} onChange={(v) => setForm({ ...form, car_plate: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>注册日期</div>
                    <DatePicker
                      size="small"
                      value={form.driving_license_register_date}
                      onChange={(v) => setForm({ ...form, driving_license_register_date: (v as any) || '' })}
                      format="YYYY-MM-DD"
                      placeholder="选择日期"
                      allowInput={false}
                      clearable
                      style={{ width: '100%' }}
                    />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车辆长度(米)</div>
                    <Input size="small" value={String(form.driving_license_car_length ?? '')} onChange={(v) => setForm({ ...form, driving_license_car_length: v ? Number(v) : undefined })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车辆宽度(米)</div>
                    <Input size="small" value={String(form.driving_license_car_width ?? '')} onChange={(v) => setForm({ ...form, driving_license_car_width: v ? Number(v) : undefined })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车辆高度(米)</div>
                    <Input size="small" value={String(form.driving_license_car_height ?? '')} onChange={(v) => setForm({ ...form, driving_license_car_height: v ? Number(v) : undefined })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>最大载重(吨)</div>
                    <Input size="small" value={String(form.driving_license_max_load ?? '')} onChange={(v) => setForm({ ...form, driving_license_max_load: v ? Number(v) : undefined })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>载重体积(方)</div>
                    <Input size="small" value={String(form.driving_license_max_volume ?? '')} onChange={(v) => setForm({ ...form, driving_license_max_volume: v ? Number(v) : undefined })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>最大限高(米)</div>
                    <Input size="small" value={String(form.driving_license_max_height ?? '')} onChange={(v) => setForm({ ...form, driving_license_max_height: v ? Number(v) : undefined })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车辆轴数</div>
                    <Input size="small" value={form.driving_license_vehicle_axles} onChange={(v) => setForm({ ...form, driving_license_vehicle_axles: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>禁区/国际</div>
                    <Input size="small" value={form.driving_license_forbidden_area} onChange={(v) => setForm({ ...form, driving_license_forbidden_area: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>装载方式</div>
                    <Input size="small" value={form.driving_license_loading_method} onChange={(v) => setForm({ ...form, driving_license_loading_method: v })} />
                  </div>
                  <div>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>车辆要求</div>
                    <Input size="small" value={form.driving_license_vehicle_requirements} onChange={(v) => setForm({ ...form, driving_license_vehicle_requirements: v })} />
                  </div>
                </div>
          </div>
        </Dialog>
        

        {/* 驳回弹窗 */}
        <Dialog
          visible={rejectDialogVisible}
          header="驳回"
          width={420}
          onClose={handleRejectCancel}
          onConfirm={handleRejectConfirm}
          confirmBtn="确认"
          cancelBtn="取消"
        >
          <div style={{ padding: '20px 0' }}>
            <div style={{ 
              marginBottom: '16px',
              fontSize: '14px',
              color: '#333',
              display: 'flex',
              alignItems: 'center'
            }}>
              <span style={{ color: '#e34d59', marginRight: '4px' }}>*</span>
              驳回理由：
            </div>
            <Textarea
              value={rejectReason}
              onChange={setRejectReason}
              placeholder="身份证与驾驶证信息不一致。"
              rows={4}
              style={{ width: '100%' }}
            />
          </div>
        </Dialog>

        {/* 确认审核弹窗 */}
        <Dialog
          visible={confirmDialogVisible}
          header="确认审核"
          width={400}
          onClose={handleConfirmCancel}
          onConfirm={handleConfirmApprove}
          confirmBtn="确认"
          cancelBtn="取消"
        >
          <div style={{ 
            padding: '20px 0',
            display: 'flex',
            alignItems: 'center',
            fontSize: '16px',
            color: '#333'
          }}>
            <div style={{
              width: '24px',
              height: '24px',
              borderRadius: '50%',
              backgroundColor: '#0052d9',
              color: 'white',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '14px',
              fontWeight: 'bold',
              marginRight: '12px'
            }}>
              i
            </div>
            是否确认通过审核？
          </div>
        </Dialog>

        {/* 司机详情弹窗 */}
        <Dialog
          visible={detailDialogVisible}
          header="详情"
          width={800}
          onClose={handleDetailClose}
          footer={
            <div style={{ textAlign: 'right' }}>
              {currentDetailRow?.auditStatus === 'pending' && (
                <Button 
                  onClick={() => {
                    if (currentDetailRow) {
                      handleReject(currentDetailRow);
                      handleDetailClose();
                    }
                  }} 
                  style={{ marginRight: '8px' }}
                >
                  驳回
                </Button>
              )}
              {currentDetailRow?.auditStatus === 'pending' && (
                <Button 
                  theme="primary" 
                  onClick={() => {
                    if (currentDetailRow) {
                      handleConfirm(currentDetailRow);
                      handleDetailClose();
                    }
                  }}
                >
                  确认
                </Button>
              )}
            </div>
          }
        >
          {currentDetailRow && (
            <div style={{ padding: '20px 0' }}>
              {/* 基本信息区域 */}
              <div style={{ 
                display: 'grid', 
                gridTemplateColumns: '1fr 1fr', 
                gap: '16px 40px',
                marginBottom: '32px'
              }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>司机姓名：</span>
                  <span>{currentDetailRow.driverName}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>手机号：</span>
                  <span>{currentDetailRow.phone}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>驾驶证号：</span>
                  <span>{currentDetailRow.licenseNumber}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>行驶证号：</span>
                  <span>123456789012345567</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>车型：</span>
                  <span>{currentDetailRow.vehicleType}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>车牌号：</span>
                  <span>{currentDetailRow.plateNumber}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>身份证号：</span>
                  <span>{currentDetailRow.idNumber}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <span style={{ color: '#666', minWidth: '80px' }}>注册时间：</span>
                  <span>{currentDetailRow.registerDate}</span>
                </div>
              </div>

              {/* 证件照片区域 */}
              <div style={{ 
                display: 'grid', 
                gridTemplateColumns: '1fr 1fr', 
                gap: '24px'
              }}>
                {/* 左列 */}
                <div>
                  {/* 身份证正面 */}
                  <div style={{ marginBottom: '24px' }}>
                    <div style={{ color: '#666', marginBottom: '8px' }}>身份证正面：</div>
                    <img
                      src={currentDetailRow.idCardFront || defaultPhotoUrl}
                      alt="身份证正面"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.idCardFront, '身份证正面')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>

                  {/* 身份证反面 */}
                  <div style={{ marginBottom: '24px' }}>
                    <div style={{ color: '#666', marginBottom: '8px' }}>身份证反面：</div>
                    <img
                      src={currentDetailRow.idCardBack || defaultPhotoUrl}
                      alt="身份证反面"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.idCardBack, '身份证反面')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>

                  {/* 行驶证正面 */}
                  <div style={{ marginBottom: '24px' }}>
                    <div style={{ color: '#666', marginBottom: '8px' }}>行驶证正面：</div>
                    <img
                      src={currentDetailRow.vehicleLicenseFront || defaultPhotoUrl}
                      alt="行驶证正面"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.vehicleLicenseFront, '行驶证正面')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>

                  {/* 行驶证反面 */}
                  <div>
                    <div style={{ color: '#666', marginBottom: '8px' }}>行驶证反面：</div>
                    <img
                      src={currentDetailRow.vehicleLicenseBack || defaultPhotoUrl}
                      alt="行驶证反面"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.vehicleLicenseBack, '行驶证反面')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>
                </div>

                {/* 右列 */}
                <div>
                  {/* 驾驶证正面 */}
                  <div style={{ marginBottom: '24px' }}>
                    <div style={{ color: '#666', marginBottom: '8px' }}>驾驶证正面：</div>
                    <img
                      src={currentDetailRow.licenseFront || defaultPhotoUrl}
                      alt="驾驶证正面"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.licenseFront, '驾驶证正面')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>

                  {/* 驾驶证反面 */}
                  <div style={{ marginBottom: '24px' }}>
                    <div style={{ color: '#666', marginBottom: '8px' }}>驾驶证反面：</div>
                    <img
                      src={currentDetailRow.licenseBack || defaultPhotoUrl}
                      alt="驾驶证反面"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.licenseBack, '驾驶证反面')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>

                  {/* 车辆照片 */}
                  <div>
                    <div style={{ color: '#666', marginBottom: '8px' }}>车辆照片：</div>
                    <img
                      src={currentDetailRow.vehiclePhoto || defaultPhotoUrl}
                      alt="车辆照片"
                      style={{
                        width: '100%',
                        maxWidth: '300px',
                        height: '180px',
                        objectFit: 'cover',
                        borderRadius: '8px',
                        border: '1px solid #e7e7e7',
                        cursor: 'pointer'
                      }}
                      onClick={() => handleDetailImageView(currentDetailRow.vehiclePhoto, '车辆照片')}
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = defaultPhotoUrl;
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
          )}
        </Dialog>

        {/* 详情页图片查看弹窗 */}
        <Dialog
          visible={detailImageDialogVisible}
          header="查看图片"
          width={700}
          onClose={handleDetailImageDialogClose}
          footer={false}
          closeBtn={true}
        >
          <div style={{ 
            padding: '20px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#f5f5f5',
            borderRadius: '8px'
          }}>
            <img
              src={currentDetailImage.src}
              alt={currentDetailImage.title}
              style={{
                maxWidth: '100%',
                maxHeight: '400px',
                borderRadius: '8px',
                objectFit: 'contain',
                backgroundColor: '#fff'
              }}
              onError={(e) => {
                const target = e.target as HTMLImageElement;
                target.src = defaultPhotoUrl;
              }}
            />
          </div>
        </Dialog>

      </Card>
    </div>
  );
};

export default DriverAuditPage;
